<template>
  <div class="container">
    <div class="header">
      <span class="Data_font">事件列表
        <el-dropdown class="eventType">
          <span class="el-dropdown-link">
            {{eventQuery.event_type == 'DataEvent' ? '数据事件' : '管理事件'}}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown">
            <el-dropdown-item @click.native="handleEventChange('DataEvent')">数据事件</el-dropdown-item>
            <el-dropdown-item @click.native="handleEventChange('ManageEvent')">管理事件</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span> 
      <div class="header-right">
        <el-dropdown>
          <span class="user_icon">
            <img src="../../../../assets/images/user-icon.png">
          </span>
          <el-dropdown-menu @click.native='handleUserSetting("loginout")' style="fontSize:12px;padding: 10px 20px;cursor:pointer">
            退出登录
          </el-dropdown-menu>
        </el-dropdown>
        <alarm-icon></alarm-icon>
      </div>
    </div>
    <div class="main eventMain">
      <div class="screening-area">       
        <span>
          事件来源
          <el-dropdown :disabled="tableList.length == 0 && eventQuery.event_source === ''" trigger="click">
            <span class="el-dropdown-link">
              <span class="el-dropdown-text">{{eventSourceDefaultValue}}</span>
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown">
              <el-dropdown-item @click.native="handleEventSource('所有来源')">所有来源</el-dropdown-item>
              <el-dropdown-item v-for="(item,index) in eventSourceDropDownList" :key="index" 
              @click.native="handleEventSource(item)" :v-model="item">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <span>
          资源类型
          <el-dropdown :disabled="tableList.length == 0 && eventQuery.resource_type === ''" trigger="click">
            <span class="el-dropdown-link">
              <span class="el-dropdown-text">{{allResourceDefaultValue}}</span>
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown">
              <el-dropdown-item @click.native="handleResourceType('所有资源类型')">所有资源类型</el-dropdown-item>
              <el-dropdown-item v-for="(item,index) in allResourceDropDownList" :key="index"
               @click.native="handleResourceType(item)">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <span>
          事件级别
          <el-dropdown :disabled="tableList.length == 0 && eventQuery.level == ''" trigger="click">
            <span class="el-dropdown-link">
              <span class="el-dropdown-text">{{eventLevelDefaultValue}}</span>
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown">
              <el-dropdown-item @click.native="handleEventLevel('所有级别')">所有级别</el-dropdown-item>
              <el-dropdown-item v-for="(item,index) in eventLevelDropDownList" :key="index" @click.native="handleEventLevel(item)">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <span>
          操作状态
          <el-dropdown :disabled="tableList.length == 0 && eventQuery.state === ''" trigger="click">
            <span class="el-dropdown-link">
              <span class="el-dropdown-text">{{operationStateDefaultValue}}</span>
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown">
              <el-dropdown-item @click.native="handleState('全部')">全部</el-dropdown-item>
              <el-dropdown-item v-for="(item,index) in operationStateDropDownList" :key="index" @click.native="handleState(item)">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
        <span>
          其他筛选
          <el-dropdown class="searchDropdown" trigger="click">
            <span class="el-dropdown-link">
              {{filterCategory}}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" :appendToBody="false" class="event-dropdown searchDropdownItem">
              <el-dropdown-item @click.native="handleFilterData('按事件名搜索')">按事件名搜索</el-dropdown-item>
              <el-dropdown-item @click.native="handleFilterData('按资源id搜索')">按资源id搜索</el-dropdown-item>
              <el-dropdown-item @click.native="handleFilterData('按资源名搜索')">按资源名搜索</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span class="event-search">
            <el-input 
              v-model="searchInputBox" 
              :placeholder=acPlaceholder 
              :disabled="tableList.length == 0 && searchInputBox ===''"
              ref="searchInput">
            </el-input>
          </span>
        </span>
      </div>
      <div class="screening-area2">
        <div class="user-selection">
          <span>操作用户</span>
          <el-select 
            v-model="chosenUserOptions" 
            multiple placeholder="请选择" 
            :popper-append-to-body="false"
            @visible-change="userDropdownVisibleChange"
            @remove-tag="handleCheckboxChange"
            :disabled="tableList.length == 0 && chosenUserOptions.length == 0"
            >
            <el-input 
              v-model="userInputText" 
              placeholder="搜索" 
              class="userinput-style"
              suffix-icon = "el-icon-search"
              @input="userSelectInput"
              >
            </el-input>
            <el-checkbox 
              :indeterminate="isIndeterminate" 
              v-model="checkAll" 
              @change="handleCheckAllChange"
              class="checkAll-style"
              :disabled="userList.length == 0"
            >
              全选
            </el-checkbox>
            <el-checkbox-group v-model="chosenUserOptions" @change="handleCheckboxChange" class="checkbox-style">
              <el-checkbox v-for="item,index in userList" :label="item" :key="index">{{item}}</el-checkbox>
            </el-checkbox-group>
            <el-option 
              key="1"
              label=""
              value="" 
              style="display:none">
            </el-option>
          </el-select>
        </div>
        <div class="btn_setion_time">
          <el-radio-group v-model="radioTime" @change="handleTimeChange">
            <el-radio-button label="最近1小时"></el-radio-button>
            <el-radio-button label="最近1天"></el-radio-button>
            <el-radio-button label="最近1周"></el-radio-button>
            <el-radio-button label="自定义时间段"></el-radio-button>
          </el-radio-group>
          <transition name="el-fade-in-linear">
            <span v-if="timePickerShow && radioTime == '自定义时间段'" class="time-picker-style">
              <p class="searchDescription">请选择日期时间</p>
              <el-form :model="chosenTime" label-width="70px">
                <el-form-item label="开始时间">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="chosenTime.startTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    v-model="chosenTime.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" plain @click="dataTimeConfirm" class="timeConfimBtn">确定</el-button>
                </el-form-item>
              </el-form>
            </span>
          </transition>
          <span v-if="timeTextShow" 
            class="time-text-style" 
            @click="timePickerShow = true">
              {{startTime}}-{{endTime}}
          </span>                        
        </div>
        <div class="btn_section_handle">
          <el-button type="primary" plain @click="filterQuery" :disabled="tableList.length == 0 && searchInputBox ===''">查询</el-button>
          <el-button type="info" plain @click="resetTable">重置</el-button>    
          <downloadExcel
            class="download-button"
            :fields="fileHeader"
            :name="endTime+'.xls'"         
            :fetch="getTableData"
            :before-generate = "download"
            >
            导出
          </downloadExcel>
          <div class="setting-icon el-icon-refresh-left" @click="getTableData"></div>
        </div>
      </div>
      <!-- 表格区域 -->
      <el-table
        tooltip-effect="dark"
        :header-cell-style="{
          color: '#131416', fontsize: '12px',
          fontWeight: 'Bold', fontFamily:'Microsoft YaHei, Microsoft YaHei-Bold',
          backgroundColor:'#F8F8F8',height:'40px' }"
        :row-style="{height:'54px'}"
        :cell-style="{}"
        :data="tableList"
        style="margin-top:20px; margin-bottom: 30px;border: 1px solid #e6e6e6; border-radius: 2px;"
        v-loading="loading"
        >
        <el-table-column
          prop="event_name"
          label="事件名称"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="event_source"
          label="事件来源"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="resource_type"
          label="资源类型"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="resource_id"
          label="资源ID"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="resource_name"
          label="资源名称"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="state"
          label="操作状态"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="level"
          label="事件级别"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="username"
          label="操作用户"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="event_time"
          label="操作时间"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.create_time | dataFormat('YYYY/MM/DD  HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label="事件详情"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="cursor:pointer;color:#0a4cee" @click="showDetail(scope.row.detail)">查看详情</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="eventQuery.page"
        :page-sizes="[10, 50, 100, 150, 200]"
        :page-size="eventQuery.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        v-if="totalCount > 0"
        >
      </el-pagination>
    </div>

    <el-dialog
      title="查看事件"
      :visible.sync="detailDialogVisible"
      width="35%"
      ref="dialogDetail"
      >
      <pre class="detail-style">{{details}}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="detailDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import alarmIcon from '../../../../components/alarmIconComponent/alarmIconComponent.vue'
export default {
  components:{
    alarmIcon
  },
  data(){
    return {
      eventType: 'DataEvent',
      tableList: [],
      tableDataList: {},
      totalCount: 0,
      loading: false,
      radioTime: '最近1小时',
      detailDialogVisible: false,
      details: '',
      checkAll: false,
      isIndeterminateFlag: false,
      chosenUserOptions: [],
      userList:[],
      userListOptions:[],
      userInputText: '',
      chosenTime: {startTime:'',endTime:''},
      startTime: '',
      endTime: '',
      timePickerShow: false,
      reset: false,
      downloadClickedFlag: false,
      fileList:[],
      fileHeader:{
        '事件类型': 'event_type','事件名称': 'event_name','事件来源': 'event_source','资源类型': 'resource_type','资源ID': 'resource_id','资源名称': 'resource_name',
        '操作状态': 'state','事件级别': 'level','操作用户': 'username','操作时间': 'create_time','事件详情': 'detail'
      },
      filterCategory: '按事件名搜索',
      eventSourceDropDownItem: '',
      eventSourceDropDownList: [],
      eventSourceDefaultValue: '所有来源',
      allResourceDropDownItem: '',
      allResourceDropDownList: [],
      allResourceDefaultValue: '所有资源类型',
      eventLevelDropDownItem: '',
      eventLevelDropDownList: [],
      eventLevelDefaultValue: '所有级别',
      operationStateDropDownItem: '',
      operationStateDropDownList: [],
      operationStateDefaultValue: '全部',
      searchInputBox: '',
      acPlaceholder: '输入事件名关键字搜索',
      filterId: 'event_name',
      filterSelect: '',
      eventQuery: {
        'page': 1,'page_size': 10,'event_type': 'DataEvent','reset': false,'event_source': '','resource_type': '','level': '','state': '',
        'username': [],'event_name': '','resource_id': '','resource_name': '','create_time': ['',''],
      }
    }
  },
  async created() {
    this.eventQuery.reset = true;
    this.handleTimeChange('最近1小时');
  },
  methods:{
    // 获取表单数据
    async getTableData() {
      let tempPageSize = this.eventQuery.pageSize;
      let tempPage = this.eventQuery.page;
      this.loading = true;
      if (this.downloadClickedFlag) {
        this.eventQuery['page_size'] =this.pageSize;
        this.eventQuery.page = 1;
        this.loading = false;
      }
      this.eventQuery.create_time[0] = this.startTime
      this.eventQuery.create_time[1] = this.endTime;
      let query = this.queryJoint(this.eventQuery);
      let res = await this.$url.get(`trace/event?${query}`)
      this.tableDataList = res.data.data;
      this.loading = false;
      this.eventQuery.reset = false;
      if (this.downloadClickedFlag) {
        this.fileList = this.tableDataList.data_list;
        this.fileList.forEach(item => {
          item.detail = JSON.stringify(item.detail)
        })
        this.eventQuery.pageSize = tempPageSize;
        this.eventQuery.page = tempPage;
        this.downloadClickedFlag = false;
        return this.fileList
      } else {
        this.tableList = this.tableDataList.data_list;
        this.totalCount = this.tableDataList.count;
        if(this.tableDataList.union_field_values){
          let dropDownData = this.tableDataList.union_field_values;
          this.allResourceDropDownList = dropDownData.resource_type;
          this.eventSourceDropDownList = dropDownData.event_source;
          this.eventLevelDropDownList = dropDownData.level;
          this.operationStateDropDownList = dropDownData.state;
          this.userListOptions = dropDownData.username;
          this.userList = this.userListOptions;
        }
      }
    },
    handleEventSource(command) {
      this.eventSourceDefaultValue = command;
      this.eventQuery.page = 1;
      if (command === '所有来源') {
        Object.assign(this.eventQuery, {'event_source':''})
        this.getTableData()
      } else {
        Object.assign(this.eventQuery, {'event_source':'command'}) ;
        this.getTableData()
      }
    },
    handleResourceType(command) {
      this.allResourceDefaultValue = command;
      this.eventQuery.page = 1;
      if (command === '所有资源类型') {
        Object.assign(this.eventQuery, {'resource_type':''}) ;
        this.getTableData()
      } else {
        Object.assign(this.eventQuery, {'resource_type':'command'}) ;
        this.getTableData()
      }
    },
    handleEventLevel(command) {
      this.eventLevelDefaultValue = command;
      this.eventQuery.page = 1;
      if (command === '所有级别') {
        this.eventQuery.level = '';
        this.getTableData()
      } else {
        this.eventQuery.level = command;
        this.getTableData()
      }
    },
    handleState(command) {
      this.operationStateDefaultValue = command;
      this.eventQuery.page = 1;
      if (command === '全部') {
        this.eventQuery.state = '';
        this.getTableData()
      } else {
        this.eventQuery.state = command;
        this.getTableData()
      }
    },
    handleFilterData(command) {
      this.filterCategory = command;
      if (this.filterCategory === '按事件名搜索') {
        this.acPlaceholder = '输入事件名关键字搜索';
        this.filterId = 'event_name';
      } else if (this.filterCategory === '按资源id搜索') {
        this.acPlaceholder = '输入资源id关键字搜索';
        this.filterId = 'resource_id';
        this.searchInputBox = ''
      } else if (this.filterCategory === '按资源名搜索') {
        this.acPlaceholder = '输入资源名关键字搜索';
        this.filterId = 'resource_name';
        this.searchInputBox = ''
      }
      this.$refs.searchInput.focus();
    },
    filterQuery(){
      if (this.searchInputBox === '') {
        return this.$message.error('请输入查询关键字')
      }
      this.eventQuery.page = 1;
      if (this.filterId === 'event_name') {
        Object.assign(this.eventQuery, {'event_name':'this.searchInputBox'});
        this.getTableData();
      } else if (this.filterId === 'resource_id') {
        Object.assign(this.eventQuery, {'resource_id':'this.searchInputBox'});
        this.getTableData();
      } else if (this.filterId === 'resource_name') {
        Object.assign(this.eventQuery, {'resource_name':'this.searchInputBox'});
        this.getTableData();
      }
    },
    //监听pagesize改变事件
    handleSizeChange(val) {
      Object.assign(this.eventQuery, {'page_size':val})
      this.pageSize = val;
      this.getTableData()
    },
    // 监听页码值改变的事件
    handleCurrentChange(val) {
      this.eventQuery.page =val;
      this.currentPage = val;
      this.getTableData()
    },
    // 切换事件
    handleEventChange(event) {
      if (this.eventQuery['event_type'] == event) {
        return
      } else {
        this.eventQuery['event_type'] = event
        this.resetTable();
      }
    },
    // 操作用户下拉框出现/隐藏事件
    userDropdownVisibleChange(flag) {
      if (flag == false) {
        this.userInputText = '';
        this.userList = this.userListOptions;
      }
    },
    // 操作用户输入事件
    userSelectInput(content) {
      this.userList = this.userListOptions;
      this.checkAll = false;
      this.isIndeterminateFlag = false;
      if (content !== '') {
        let len = content.length;
        this.checkAll = true;
        this.userList = this.userList.filter(item=>{
          if (item.slice(0,len) == content) {
            if (!this.chosenUserOptions.includes(item)) {
              this.checkAll = false;
            } else {
              this.isIndeterminateFlag = true;
            }          
          } 
          return false;  
        })
      }else if(this.userList.length == this.chosenUserOptions.length){
        this.checkAll = true;
      }
      if (this.userList.length == 0) {
        this.checkAll = false;
      }
    },
    // 操作用户选项全选事件
    handleCheckAllChange(val) {
      if (val) {
        this.checkAll = true;
        this.userList.forEach(item=>{
          if (!this.chosenUserOptions.includes(item)) {
            this.chosenUserOptions.push(item);
          }
        })
      } else {
        this.checkAll = false;
        this.chosenUserOptions = this.chosenUserOptions.filter(item=>{
          return !this.userList.includes(item);
        })
      }
      this.eventQuery.page = 1;
      this.eventQuery.username = this.chosenUserOptions;
      this.getTableData();
    },
    // 操作用户选项改变事件 
    handleCheckboxChange(value) {
      this.isIndeterminateFlag = false;
      this.checkAll = true;
      for (let i = 0;i < this.userList.length; i++) {
        if (!this.chosenUserOptions.includes(this.userList[i])) {
          this.checkAll = false;
        } else {
          this.isIndeterminateFlag = true;
        }
      }
      if (this.userList.length == 0) {
        this.checkAll = false;
      }
      this.eventQuery.page = 1;
      this.eventQuery.username = this.chosenUserOptions;
      this.getTableData();
    },
    // 选择时间事件
    handleTimeChange(time) {
      this.radioTime = time;
      let now = new Date();
      let past = moment(now);
      if (time == '最近1小时') {
        past.subtract(1,'hours');
      } else if (time == '最近1天') {
        past.subtract(1,'days');
      } else if (time == '最近1周') {
        past.subtract(1,'weeks');
      } else {
        this.startTime = '';
        this.endTime = '';
        this.chosenTime.startTime = '';
        this.chosenTime.endTime = '';
        this.timePickerShow = true;
        return 
      }
      this.eventQuery.page = 1;
      this.startTime = this.timeFormat(past);
      this.endTime = this.timeFormat(now);
      this.getTableData();   
    },
    // 确认自定义时间选择事件
    dataTimeConfirm() {
      if (this.chosenTime.startTime == '' || this.chosenTime.endTime == '') {
        return this.$message.error('请选择具体时间')
      }
      let time1 = new Date(this.chosenTime.startTime);
      let time2 = new Date(this.chosenTime.endTime);
      if (time1.getTime() >= time2.getTime()) {
        return this.$message.error('开始时间需小于结束时间')
      }
      this.startTime = this.chosenTime.startTime;
      this.endTime = this.chosenTime.endTime;
      this.getTableData();
      this.timePickerShow = false; 
    },
    // 时间格式化
    timeFormat(time) {
      return moment(time).format('yyyy-MM-DD HH:mm:ss');
    },
    // 点击重置按钮
    resetTable() {
      this.checkAll = false;
      this.chosenUserOptions = [];
      this.userInputText = '';
      this.eventSourceDefaultValue = '所有来源';
      this.allResourceDefaultValue = '所有资源类型';
      this.eventLevelDefaultValue = '所有级别';
      this.operationStateDefaultValue = '全部';
      this.searchInputBox = '';
      Object.keys(this.eventQuery).forEach(key=>{
        if(key == 'username') {
          this.eventQuery[key].length = 0;
        } else if(key !== 'event_type' && key !== 'create_time' ){
          this.eventQuery[key] = '';
        }
      })
      this.eventQuery.page = 1;
      this.eventQuery.pageSize = 10;
      this.eventQuery.reset = true;
      this.handleTimeChange('最近1小时');
    },
    // 点击导出按钮    
    download() {
      this.downloadClickedFlag = true;
    },
    // 点击查看详情事件
    showDetail(detail) {
      this.details = detail;
      this.detailDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.dialogDetail.$el.scrollTop = 0;
      });
    },
    // 退出登录
    handleUserSetting(command) {
      if (command === 'loginout') {
        this.$url.post('logout')
        .then(res => {
          if (res.status === 200) {
            this.$message.success('退出成功')
            this.$router.push({ path:'/Login'})
            this.$stor.del('X-CSRFToken')
          }
        })
      }
    }
  },
  computed: {
    timeTextShow() {
      return this.radioTime == '自定义时间段' &&  this.startTime !== '' && this.endTime !== '';
    },
    isIndeterminate() {
      if(this.chosenUserOptions.length > 0 && this.isIndeterminateFlag) {
        if(this.chosenUserOptions.length < this.userList.length  || !this.checkAll){
          return true;
        }
        return false 
      }
      return false;
    },
  },
}
</script>

<style lang="less" src="../../../../assets/css/anonymizeDataPageStyle.less">
</style>
<style lang="less">
  .eventType {
    margin-left: 6px;
    color: #131416;
    font-weight: normal;
    cursor: pointer;
    .event-dropdown{
      min-width: 80px;
      width: 80px;
      margin-top: 0;
    }
  }
  .screening-area {
    height: 28px;
    line-height: 26px;
    font-size: 12px;
    .el-dropdown {
      width: 120px;
      height: 28px;
      box-sizing: border-box;
      border: 1px solid #E0E2E9;
      border-radius: 2px;
      font-size: 12px;
      margin-left: 8px;
      margin-right: 26px;
      padding: 0 8px;
      cursor: pointer;
      &[aria-disabled] {
        background-color: #f8f8f8;
      }
      .el-dropdown-link {
        width: 100%;
        display: inline-block;
        .el-dropdown-text {
          width: 82px;
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: top;
        }
        .el-icon--right {
          height: 28px;
          line-height: 26px;
          float: right;
          font-size: 14px;
          color: #a1a1a1;
        }
      }
    }
    .searchDropdown {
      width: 130px;
      margin-right: 0px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      .searchDropdownItem {
        width: 130px;
      }
    }
    .el-input {
      height: 28px;
      width: 430px;
      vertical-align: top;
      .el-input__inner {
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        border-left: none;
        border-radius: 2px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      .el-input.is-active .el-input__inner, .el-input__inner:focus, .el-input__inner:hover {
        border-color: #DCDFE6;
      }
      .el-input__icon {
        line-height: 30px;
      }
    }
    .el-input.is-disabled .el-input__inner {
      background-color: #f8f8f8;
    }
  }
  .screening-area2 {
    display: flex;    
    height: 50px;
    width: 100%;
    font-size: 12px;
    margin-top: 20px;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    .user-selection {
      vertical-align: middle;
      span {
        line-height: 30px;
      }
      .el-select {
        margin-left: 12px;
        margin-right: 30px;
        min-width: 330px;
        .el-input__inner {
          height: 30px;
          font-size: 12px;
          border-radius: 2px;
          border-color: #E0E2E9;
        }
        .el-input__icon {
          line-height: 30px;
        }
        .el-icon-arrow-up:before {
          color: #a1a1a1;
          content: "\e78f";;
        }
        .el-popper .popper__arrow{
          border-width: 0;
          &::after {
            border-width: 0;
          }
        }
        .el-select-dropdown {
          border-radius: 2px;
        }
        .el-select-dropdown__list {
          padding-top: 3px;
        }
        .userinput-style .el-input__inner {
          border: none;
          border-bottom: 1px solid #e8eaef;
          cursor: text;
        }
        .el-input.is-disabled .el-input__inner {
          background-color: #f8f8f8;
        }
        .checkAll-style,
        .checkbox-style .el-checkbox {
          display: block;
          box-sizing: border-box;
          padding-left: 15px;
          height: 30px;
          line-height: 30px;
          width: 100%;
          &:hover {
            background-color: #eee;
          }
          .el-checkbox__label {
            font-size: 12px;
          }
          .el-checkbox__inner {
            width: 12px;
            height: 12px;
            &::after {
              width: 6px;
              height: 6px;
            }
            &::before {
              top: 4px;
            }
          }
        }
      }
    }
    .btn_setion_time {
      position: relative;
      .el-radio-group {
        box-sizing: border-box;
        height: 30px;
        border: 1px solid #E0E2E9; 
        vertical-align: baseline;
        .el-radio-button {
          height: 30px;
        }
      }
      .el-radio-button__inner {
        height: 28px;
        padding: 0 22px !important;
        font-size: 12px;
        line-height: 26px;
        border-color: #fff;
        border-left: 1px solid #E6E6E6;
        vertical-align: baseline;
        background: none;
        &:hover {
          border-color: #0a4cee;
          color: #0a4cee;
          border-radius: 2px;
        }
      }
      .el-radio-button:first-child .el-radio-button__inner {
        border-color: #fff;
        &:hover {
          border-radius: 2px;
          border-color: #0a4cee;
          color: #0a4cee
        }
      }  
      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        border-radius: 2px;      
        color: #0a4cee;
        background-color: #fff;
        border-color: #0a4cee;
        box-shadow: none;
        &:hover {
          color: #0a4cee;
        }
      }
      .el-radio-button:last-child .el-radio-button__inner {
        border-radius: 2px;
      }
      .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
        box-shadow: none;
      }
      .time-picker-style {
        position: absolute;  
        top: 50px;
        left: 140px;
        border: 1px solid #E6E6E6;
        padding: 20px 20px 0 20px;
        background-color: #fff;
        box-shadow: 0 2px 8px 0 rgba(230, 230, 230, .5);
        z-index: 5;
        .timeConfimBtn {
          width: 200px;
          padding: 10px 20px;
        }
      }
      .time-text-style {
        color: #0a4cee;
        margin-left: 20px;
        cursor: pointer;
      }
    }
    .btn_section_handle{
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
      .el-button, .download-button {
        height: 28px;
        padding: 0 27px;
        line-height: 26px;
        margin-right: 6px;
      }
      .download-button {
        display: inline-block;
        box-sizing: border-box;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        cursor: pointer;
        margin-left: 10px;
        &:hover {
          box-shadow: 0 2px 8px 0 rgba(230, 230, 230, .5);
        }
      }
      .setting-icon{
        box-sizing: border-box;
        cursor: pointer;
        width: 28px;
        height: 28px;
        border: 1px solid #E6E6E6;
        border-radius: 2px;
        text-align: center;
        margin-left: 10px;
        line-height: 26px;
        vertical-align: bottom !important;
        &::before {
          font-size: 16px;
        }
      }
      .el-icon-refresh-left {
        vertical-align: bottom !important;
      }  
    }
  }
  .eventMain {
    .el-table th:nth-child(n+2) .cell {
      border-left: 1px solid #E6E6E6 !important;
    }
    .el-table th .cell {
      padding-left: 20px;
    }
    .el-table td .cell {
      padding-left: 21px;
    }
    .el-table td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal !important
    }
  }
  .detail-style {
    font-family: Microsoft YaHei;
    margin: 20px 5px 50px;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .dialog-footer {
    .el-button {
      width: 320px;
    }
  }
  //下拉列表样式
  .event-dropdown {
    margin: 0;
    min-width: 120px;
    padding: 0;
    font-size: 12px;
    color: #575D6C;
    border-radius: 2px;
    .el-dropdown-menu__item {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      padding: 0 8px;
      text-align: left;
      &:hover {
        color: #575D6C;
        background-color: #f8f8f8;
      }
    }    
    .popper__arrow{
      border-width: 0;
      border: none;
      &::after {
        border-width: 0;
      }
    }
  }
</style>